<template>
  <div class="app-container">
     <el-form ref="partsRef" :model="form"  label-width="80px">
          <div class="flex-container">
              <!-- <li>零件名称: {{ form.partName }}</li>
              <li>零件编号: {{ form.partNumber }}</li>
              <li>描述: {{ form.description }}</li>
              <li>成本: {{ form.cost }}</li>
              <li>创建时间: {{ form.createdDate }}</li> -->
              <el-form-item label="零件名称 " prop="partName">
                <template v-if="form.isEdit">
                   <el-input  v-model="form.partName" placeholder="请输入零件名称" />
                </template>
                <template v-else>
                  <li> {{ form.partName }}</li>
                </template>
            </el-form-item>

              <el-form-item label="零件编号 " prop="partName">
                <template v-if="form.isEdit">
                   <el-input  v-model="form.partNumber" placeholder="请输入零件编号" />
                </template>
                <template v-else>
                  <li>{{ form.partNumber }}</li>
                </template>
               </el-form-item>


              <el-form-item label="描述 " prop="partName">
                <template v-if="form.isEdit">
                   <el-input  v-model="form.description" placeholder="请输入描述" />
                </template>
                <template v-else>
                  <li>{{ form.description }}</li>
                </template>
               </el-form-item>


           <el-form-item label="成本 " prop="partName">
                <template v-if="form.isEdit">
                   <el-input  v-model="form.cost" placeholder="请输入成本" />
                </template>
                <template v-else>
                  <li> {{ form.cost }}</li>
                </template>
               </el-form-item>


            <!-- <el-form-item label="零件编号" prop="partNumber">
                  <el-input v-model="form.partNumber" placeholder="请输入零件编号" />
                </el-form-item>
                <el-form-item label="描述" prop="description">
                  <el-input v-model="form.description" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item label="成本" prop="cost">
                  <el-input v-model="form.cost" placeholder="请输入成本" />
                </el-form-item> -->
               <div class="dialog-footer">
                  <el-button plain v-if="!form.isEdit" type="primary" @click="editForm" size="small">编辑</el-button>
                  <el-button plain v-if="form.isEdit"  type="primary" @click="updatePartById" size="small">确 定</el-button>
                  <el-button v-if="form.isEdit"  @click="cancel" size="small">取 消</el-button>

                </div>
            </div>
 </el-form>
    <el-row :gutter="20">
      <splitpanes :horizontal="appStore.device === 'mobile'" class="default-theme">
        <!--部门数据-->
        <pane size="8">
          <el-col  class="card-box"><div class="categoryStyle1"  @click="invokeComponents(5)">
            <div class="categoryStyleItem">开发费用</div>
            <div class="categoryStyleItem">成本:{{ designCost }}</div>
            </div></el-col>
          <el-col  class="card-box"><div class="categoryStyle1" @click="invokeComponents(1)">
            <div class="categoryStyleItem">外购件</div>
            <div class="categoryStyleItem">成本:{{buycost}}</div>
          </div></el-col>
          <el-col  class="card-box"><div class="categoryStyle1"  @click="invokeComponents(2)">
            <div class="categoryStyleItem">注塑件成本</div>
            <div class="categoryStyleItem">成本:{{ moldingCost }}</div>
          </div></el-col>
          <el-col  class="card-box"><div class="categoryStyle1"  @click="invokeComponents(3)">
            <div class="categoryStyleItem">冲压&电镀件</div>
            <div class="categoryStyleItem">成本:213</div>
          </div></el-col>
          <el-col  class="card-box"><div class="categoryStyle1"  @click="invokeComponents(4)">
            <div class="categoryStyleItem">装配</div>
            <div class="categoryStyleItem">成本:323</div>
          </div></el-col>
              <el-col  class="card-box"><div class="categoryStyle1"  @click="invokeComponents(6)">
            <div class="categoryStyleItem">包装，运输</div>
            <div class="categoryStyleItem">成本:323</div>
          </div></el-col>
          <el-col  class="card-box"><div class="categoryStyle1"  @click="invokeComponents(6)">总成本</div></el-col>
    </pane>
     <!--用户数据-->
        <pane size="92">
          <el-col v-if="compcode==1">
           <buy :partid="partid" @changeVal = "handleChangebuy"></buy>
          </el-col>
          <el-col v-else-if="compcode==2">
           <injection :partid="partid" @changeVal = "handleChangeMolding"></injection>
          </el-col>
            <el-col v-else-if="compcode==3">
              <plating :partid="partid" @changeVal = "handleChangePlating"></plating>
          </el-col>
            <el-col v-else-if="compcode==4">
           <buy :partid="partid" @changeVal = "handleChange"></buy>
          </el-col>
            <el-col v-else-if="compcode==5">
           <cost :partid="partid" @changeVal = "handleChangecost"></cost>
          </el-col>
            <el-col v-else-if="compcode==6">
           <buy :partid="partid" @changeVal = "handleChange"></buy>
          </el-col>
       </pane>
      </splitpanes>
    </el-row>
 </div>
</template>

<script setup name="Injection">
import { getParts,updateParts } from "@/api/system/parts"
import useAppStore from '@/store/modules/app'
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
import buy from '@/views/system/buy/index'
import injection from '@/views/system/molding/index'
import plating from '@/views/system/plating/index'
import cost from '@/views/system/cost/index'
import { ref } from 'vue'
const { proxy } = getCurrentInstance()
const appStore = useAppStore()
const router = useRouter()
const route = useRoute()
const partid = ref(route.query.partid)
const compcode = ref(5)
const moldingCost = ref(0)
const designCost = ref(0)
const buycost = ref(0)
const form = ref({})
form.value.isEdit = false
function editForm(){
 form.value.isEdit = true
}
function cancel(){
  form.value.isEdit = false
}
function invokeComponents(componentCode){
 compcode.value = componentCode
}
function handleChangecost(val){
   designCost.value = val

 }
function handleChangebuy(val){
   buycost.value = val
}
function handleChangeMolding(val){
   moldingCost.value = val
}
function handleChangePlating(val){
   moldingCost.value = val
}
function  getpart(){
  const _id = route.query.partid
    getParts(_id).then(response => {
    form.value = response.data
  })
}

function updatePartById(){ 
  updateParts(form.value).then(response => {
      proxy.$modal.msgSuccess("修改成功")
        form.value.isEdit = false
    })
}

getpart()
console.log(form.value)
onMounted(() => {})
</script>
<style scope>
.categoryStyle1{
  display: flex;
  justify-content: center; /* 水平居中 */
  flex-direction: column;
  height: 70px;          /* 固定高度50px */
  background-color: #E6F0FF; /* 浅蓝色（可替换为 lightblue） */
  font-size: 14px;       /* 字体大小14px */
  color: #333;           /* 文字颜色（深灰色） */
  padding: 5px 10px;        /* 左右内边距15px */
  border-radius: 4px;     /* 圆角（可选） */
  box-sizing: border-box; /* 盒模型计算（包含内边距和边框） */
}
.categoryStyleItem{
   height:35px;      /* 左右内边距15px */
}
.tableClass{
  border: 1px solid #f3f3f3;
  border-collapse: collapse;
  font-size: 14px;
  height: 35px;
}
.flex-container{
  display: flex;
  flex-direction: row;
  padding: 3px;
  border: 1px solid #f3f3f3;
  border-collapse: collapse;
  font-size: 15px;
  height: 40px;
  list-style: none;
   gap: 50px;
}

</style>